<div id="root">


    <gc-nav-bar left-arrow @click-left="clickLeftFn" @click-right="clickRightFn" title="商品创建"></gc-nav-bar>


    <h1>表单组件</h1>

    <gc-table :state="false" ref="a"></gc-table>
    <gc-table :state="false" ></gc-table>
    <gc-table :state="false"></gc-table>
    <gc-table :state="false"></gc-table>
    <gc-table :state="false"></gc-table>

    <button @click="submitFn">外面的按钮</button>

    <h1>按钮组件</h1>
    <gc-button type="primary" content="主要按钮"></gc-button>
    <gc-button type="info" content="信息按钮"></gc-button>
    <gc-button type="default" content="默认按钮"></gc-button>
    <gc-button type="warning" content="警告按钮"></gc-button>
    <gc-button type="danger" content="危险按钮"></gc-button>


    <h1>loading效果</h1>
    <gc-loading1 :state="loading1State"></gc-loading1>
    <button @click="loading1State=true">显示</button>
    <button @click="loading1State=false">隐藏</button>
    <h1>loading2效果</h1>
    <gc-loading2 :state.sync="loading2State"></gc-loading2>
    <button @click="loading2State=true">显示</button>

    <h1>dialog组件</h1>
    <gc-dialog :visible.sync="dialogState" title="用户创建" content="<input type='text' />"></gc-dialog>
    <button @click="dialogState=true">显示</button>

    <h1>分页组件page</h1>
    <gc-page :total="11" :page-size="2" @click-page="changePageFn"></gc-page>

    <h1>表格组件<h1>
        <!-- 商品 -->
        <h3>商品表格</h3>
        <gc-thead :columns="goodsColumn" :data="goodsData"></gc-thead>
        <br>
        <hr>
        <!-- 用户 -->
        <h3>用户表格</h3>
        <gc-thead :columns="unameColumn" :data="unameData"></gc-thead>

        <h1>table 组件</h1>
        <gc-table :data="tableData">
            <gc-table-column prop="id" label="编号1"></gc-table-column>
            <gc-table-column prop="id" label="编号2"></gc-table-column>
            <gc-table-column prop="name" label="姓名"></gc-table-column>
            <gc-table-column prop="age" label="年龄"></gc-table-column>
            <gc-table-column label="性别">
                <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
            </gc-table-column>
            <gc-table-column label="性别2">
                <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
            </gc-table-column>
        </gc-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./gcui.css">
<script src="./gcui.js"></script>

<script>

const vm = new Vue({
    el: "#root",
    data: {
        loading1State:false,
        loading2State:false,

        dialogState: false,

        //商品表格
        goodsColumn: [
                {title:'编号',key:'id'},
                 {title:'商品名称',key:'title'},
                {title:'价格',key:'price'}
            ],
            goodsData: [
                {id:1,title:'旺旺碎冰冰',price:1.88},
                {id:2,title:'可爱多',price:8.88},
                {id:3,title:'梦龙',price:18.88}
            ],

            //用户表格
            unameColumn: [
                {title:'编号',key:'id'},
                {title:'姓名',key:'uname'},
                {title:'性别',key:'sex'},
                {title:'性别2',key:'sex2',render:(row)=>`
                 <b style="color:red">${row.sex2===1?"男":"女"}</b>`}
            ],

            unameData: [
                 {id:1,uname:'侯🐒',sex:'男'},
                 {id:2,uname:'罗🦌',sex:'男'}

            ],

              //table组件数据
            tableData: [
                { id: 1, name: "张三", age: 3, sex: 1 },
                { id: 2, name: "赵四", age: 18, sex: 2 },
                { id: 3, name: "王五", age: 32, sex: 1 },
                { id: 4, name: "王五", age: 32, sex: 2 },
            ],
    },
    methods:{
        //商品创建
        clickLeftFn(){
            alert('左边弹框😊')
        },
        clickRightFn(){ 
            alert('右边弹框😘')
        },
        //表单
        submitFn(){
            console.log('表单数据',)
            console.log(this.$refs.a.formData)
            alert('商品创建成功哥哥真棒')
        },
        changePageFn(pageNum) {
            console.log('你点击分页了：', pageNum)
        },
    }
})
</script>